<template>
	<view class="receive">
		<image :src="store_info.introduction_img" mode="" class="banner"></image>
		<view class="content">
			<view class="text">
				{{store_info.introduction_title}}
			</view>
			<image class="icon" :src="imglink + 'member/bottom.png'" mode=""></image>
			<view class="tips">
				长按下方识别二维码进群“免费领取课程”
			</view>
			<image :src="store_info.group_qrcode" mode="" class="ebanner"></image>
			<view>
				<view class="portrait-ul">
					<view v-for="(info,index) in sInfoList" :key="index" class="portrait-li">
						<image :src="info.headimgurl" class="li-icon">
					</view>
					<view v-if="sInfoList.length >= 9" class="portrait-li">
						<img :src="imglink + 'member/ellipsis.png'" class="li-icon">
					</view>
					<view class="number">共<view class="number-num">{{sInfoList.length}}</view>位家长已领取</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imglink: this.$store.state.imgLink,
				infoList: [],
				sInfoList: [],
				num:'20',
				store_info:{},
				store_id:0,
				activity_id:0
			}
		},
		onLoad(option){
			console.log(option)
			
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.activity_id = option.activity_id
		},
		onShow(){
			this.$api.gain_shop_msg({customer_store_id:this.store_id}).then(res=>{
				console.log(res)
				this.store_info=res.data
			})
			this.$api.get_buyer_and_vusers({token:this.$store.getters.getToken,activity_id:this.activity_id}).then(res=>{
				this.infoList=res.data
				this.getnum();
				this.getInfoList();
			})
		},
		mounted() {
			this.getnum();
			this.getInfoList();
		},
		methods: {
			getnum(){
				if(this.infoList.length > 20){
					console.log(this.infoList.length)
					this.num = this.infoList.length
				}
			},
			getInfoList() {
				// 模拟拿到接口数据后
				if (this.infoList.length > 9) // 如果返回了大于9的数量就截取
				{
					this.sInfoList = this.infoList.splice(0, 9);
				} else {
					this.sInfoList = this.infoList;
				}
			}
		}
	}
</script>

<style>
	.banner {
		width: 100%;
		height: 396upx;
	}

	.content {
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 0;
	}

	.content .text {
		font-family: PingFangSC-Semibold;
		font-size: 34upx;
	}

	.content .tips {
		font-family: PingFangSC-Semibold;
		margin-left: 25.5upx;
		margin-bottom: 32upx;
		font-size: 34upx;
		letter-spacing: 0;
	}

	.icon {
		margin: 11upx 0 11upx 307upx;
		width: 76upx;
		height: 93upx;
	}

	.ebanner {
		width: 360upx;
		height: 360upx;
		margin-left: 165upx;
	}
	.portrait-ul{
	    position: relative;
	    /* width: 690px; */
		margin: 0;
		margin-top: 33upx;
		margin-left: 32upx;
	    padding: 0;
	    font-size: 0;
	}
	.portrait-li{
	    display: inline-block;
	    position: relative;
	    width: 52upx;
	    height: 52upx;
	    text-align: center;
	    background-color: #ffffff;
	    border-radius: 48upx;
	    margin-right: -16upx;
	    vertical-align: middle;
	}
	.portrait-li .li-icon{
	    position: relative;
	    width: 52upx;
		height: 52upx;
	    border-radius: 48upx;
	}
	.number{
	    display: inline-block;
	    font-size: 28upx;
	    color: #2A2A2A;
	    letter-spacing: 0.82upx;
	    line-height: 40upx;
	    margin-left: 30upx;
	    vertical-align: middle;
	}
	.number-num{
		display: inline-block;
		font-size: 36upx;
		color: #ff0000;
		letter-spacing: 1.06upx;
		line-height: 40upx;
	}
</style>
